import { TabBar as AntdTabbar } from "antd-mobile";
import { useLocation, useNavigate } from "react-router-dom";
const TabBar = () => {
  const navigate = useNavigate();
  const { pathname } = useLocation();
  return (
    <div style={{ position: "fixed", bottom: 0, left: 0, width: "100%" }}>
      <AntdTabbar activeKey={pathname} onChange={(key) => navigate(key)}>
        <AntdTabbar.Item key="/" title="首页">
          {" "}
        </AntdTabbar.Item>
        <AntdTabbar.Item key="/my" title="我的"></AntdTabbar.Item>
        <AntdTabbar.Item key="/community" title="社区"></AntdTabbar.Item>
        <AntdTabbar.Item key="/Strategy" title="攻略"></AntdTabbar.Item>
      </AntdTabbar>
    </div>
  );
};

export default TabBar;